<template>
    <div class="container">
        <div id="ganMap"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import $ from 'jquery'
export default {
    data() {
        return {
            data: [
               
            ],
            geoCoordMap: {
                
            },
        }
    },
    mounted() {
        this.initMap();
    },
    methods: {
        handleData(data) {
            let list = [];
            for (let i = 0; i < data.length; i++) {
                let geoCoord = this.geoCoordMap[data[i].name];
                if (geoCoord) {
                    list.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return list;
        },
        initMap() {
            const that = this;
            let uploadDataUrl = './map-geojson/360000.json'
            $.getJSON(uploadDataUrl, function(geoJson) {
                echarts.registerMap('lol', geoJson); // 自定义地图
                let option = {
                    baseOption: {
                        timeline: {
                            show: false,
                        },
                    },
                    options: [{
                        backgroundColor: 'transparent',
                        visualMap: {
                            min: 0,
                            max: 500,
                            right: 100,
                            seriesIndex: 1,
                            bottom: 100,
                            type: 'piecewise',
                            textStyle: {
                                color: '#fff',
                            },
                            inRange: {
                                color: ['#bbdaf5', '#76b1e5', '#3f83c7']
                            },
                            show: false,
                        },
                        geo: {
                            map: 'lol',
                            silent: true,
                            aspectScale: 0.75, //长宽比
                            zoom: 1.1,
                            roam: false,
                            itemStyle: {
                                normal: {
                                    areaColor: '#013C62',
                                    shadowColor: '#182f68',
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 20,
                                },
                                emphasis: {
                                    areaColor: '#2AB8FF',
                                    borderWidth: 0, 
                                    color: 'green',
                                    label: {
                                    show: false,
                                    },
                                },
                            },
                        },
                        'series': [
                                {
                                    type: 'effectScatter',
                                    coordinateSystem: 'geo',
                                    showEffectOn: 'render',
                                    rippleEffect: {
                                        period: 15,
                                        scale: 4,
                                        brushType: 'fill',
                                    },
                                    hoverAnimation: false,
                                    itemStyle: {
                                        normal: {
                                            color: '#ffff',
                                            shadowBlur: 10,
                                            shadowColor: '#333',
                                        },
                                    },
                                    data: that.handleData(that.data)
                                },
                                {
                                    type: 'map',
                                    roam: true,
                                    label: {
                                        normal: {
                                        show: true,
                                            textStyle: {
                                                color: '#fff',
                                                fontSize: 15
                                            },
                                        },
                                        emphasis: {
                                            textStyle: {
                                                color: '#fff',
                                            },
                                        },
                                    },
                                    itemStyle: {
                                        normal: {
                                        borderColor: '#2ab8ff',
                                        borderWidth: 1.5,
                                        areaColor: '#12235c',
                                        },
                                        emphasis: {
                                        areaColor: '#2AB8FF',
                                        borderWidth: 0,
                                        color: 'green',
                                        },
                                    },
                                    zoom: 1.1,
                                    roam: false,
                                    map: 'lol', 
                                }
                    ]
                }]}

                let dom = document.getElementById("ganMap");
                let myChart = echarts.init(dom)
                option && myChart.setOption(option)

                // myChart.on('click', function(params){
                //     let area = that.data.find(e=> e.name === params.name)
                //     if(area.deptId) {
                //         that.$router.push({
                //             url: '/index',
                //             query: {
                //                 deptId: area.deptId
                //             }
                //         })
                //         that.$router.go(0)
                //     } else {
                //         that.$message.warning("暂时未开发任何库区")
                //     }
                // })
            })
        },

    },
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    #ganMap {
        width: 100%;
        height: 100%;
    }
}
</style>
